<template>
  <a-drawer
    v-model:visible="vdata.visible"
    width="40%"
    :mask-closable="false"
    @close="close"
  >
    <template #title>
      <div
        style="
          display: flex;
          justify-content: space-between;
          align-items: center;
        "
      >
        <span>重置商户号</span>
        <!-- <a-button type="link" @click="exportCode(vdata.record)">导出渠道</a-button> -->
      </div>
    </template>
    <div>
      <a-card class="table-card">
        <GzSearchForm :searchFunc="searchFunc" :resetFunc="()=>{searchData = {}}" searchConditionNum="3">
          <gz-text-up v-model:value="searchData['phone']" placeholder="请输入手机号" style="width: 150px;" />
        </GzSearchForm>
        <GzTable
          ref="infoTableRef"
          :init-data="true"
          :req-table-data-func="reqTableDataFunc"
          :table-columns="tableColumns"
          :search-data="searchData"
          :scrollX="600"
          size="small"
        >
          <template #bodyCell="{ column, record }">
            <template v-if="column.key === 'mchNo'">
              {{ record.isDeleted ==0 ? record.mchNo : '--' }}
            </template>
            <template v-if="column.key === 'operation'">
              <a-button v-if="record.isDeleted ==0" type="link" @click="resetMchNo(record.fansId)">重置商户号</a-button>
            </template>
          </template>
        </GzTable>
      </a-card>
    </div>
  </a-drawer>
</template>
<script lang="ts" setup>
    import { reactive,getCurrentInstance,ref} from 'vue'
    import {req,API_FANS_RESETMCHNO,API_URL_FANS_LIST} from '@/api/manage'
    import {$apiFansGetFansMchInfo} from '@/api/operateTool/index'

    const { $infoBox } = getCurrentInstance()!.appContext.config.globalProperties
    const props = defineProps(['callBackFunc'])

    const formRef = ref()
    const infoTableRef = ref()

    const searchData = ref({})

    const vdata = reactive({
        visible:false,
        saveObject:{}
    })
    const resultList = ref([])

    // 列表表头
const tableColumns = [
  { key: 'fansId', title: 'fansID', dataIndex: 'fansId' },
  { key: 'phone', title: '手机号码', dataIndex: 'phone' },
  { key: 'mchNo', title: '商户号', dataIndex: 'mchNo' },
  { key: 'operation', title: '操作', dataIndex: 'operation', align: 'center', width: 260 },
]

    const rules: any = {
      phone: [{ required: true, message: '请输入手机号', trigger: 'blur' }],
    }

    const close = () =>{
        vdata.visible = false
    }


    // 搜索事件
function searchFunc() {
    infoTableRef.value.refTable(true)
}

/** 请求表格数据 */
// 请求table接口数据
function reqTableDataFunc(params: any) {
  if(params.phone){
    return $apiFansGetFansMchInfo({...params})
  }else{
    return new Promise(resolve => {
      resolve('')
    })
  }
}

// 重置商户号
const resetMchNo = (fansId) =>{
  $infoBox.confirmDanger('确认重置？', '请确认是否重置当前商户号？', () => {
        //  $apiFansGetFansMchInfo({phone:})
        req.add(API_FANS_RESETMCHNO, {fansId:fansId}).then(() => {
          $infoBox.message.success(`重置成功`)
          infoTableRef.value.refTable(true)
        })
  })
}


    /**
 * 展开
 */
async function show(record) {
  vdata.visible = true
}

defineExpose({
  show,
})
</script>
<style lang="less">
.table-search-item{
  width: 200px !important;
}
</style>